<template>
	<h2>toRaw 与 markRaw</h2>
	<h3>state:{{ state }}</h3>
	<hr />
	<button @click="testToRaw">测试toRaw</button>
	<button @click="testMarkRaw">测试MarkRaw</button>
</template>

<script lang="ts">
import { defineComponent, reactive, toRaw } from "vue"

export default defineComponent({
	name: "App",
	setup(props) {
		const state = reactive<UserInfo>({
			name: "小明",
			age: 20
		})
		const testToRaw = () => {
			// 把代理对象编程了普通对象，数据变化，界面不变化
			const user = toRaw(state)
			user.name += "=-="
			console.log("我真坏事!")
		}

		const testMarkRaw = () => {
			state.likes = ["吃", "喝", "玩", "乐"]
		}
		return {
			testToRaw,
			testMarkRaw,
			state
		}
	}
})
</script>

<style></style>
